<style ng-bind="Theme.css_gutter()"></style>
<style ng-bind="Theme.css_selection()"></style>
<style ng-bind="Theme.css_scopes()"></style>

<div ng-controller="previewController">
  <!-- preview  -->
  <div id="preview" class="preview"
       inline-edit
       ng-class="{ 'slide': Editor.Gallery.visible, 'no-scroll': EditPopover.visible }"
       ng-style="{ 'background-color': Color.parse(Theme.bg.color), 'color': Color.parse(Theme.fg.color) }">
    <pre ng-if="Theme.json"
         ng-class="root_scope"
         ng-bind-html="colorized"
         ng-style="{ 'color': Color.parse(Theme.fg.color) }"></pre>
  </div>

  <div class="btn-group dropup languages-dd" dropdown ng-cloak ng-show="Theme.json">
    <a class="btn btn-mac btn-small dropdown-toggle" dropdown-toggle>
      <span class="icon-arrow-combo ud-arrow"></span>
      {{ current_lang }}
    </a>
    <ul class="dropdown-menu pull-right" ng-style="{'max-height': dropdowns_max_height }">
      <li ng-repeat="lang in ::available_langs">
        <a ng-click="set_lang(lang)">{{::lang}}</a>
      </li>
    </ul>
  </div>

  <ng-include src="'template/preview/custom_code.html'"></ng-include>
  <ng-include src="'template/preview/scope_hunter.html'"></ng-include>
</div>
